import React from 'react';
import styles from './style';
import {View,SafeAreaView,Image,Text,TouchableOpacity,ScrollView} from 'react-native';
import * as Animatable from 'react-native-animatable';
import Back from '../../../../common/component/back'
import { FlatList } from 'react-native-gesture-handler';
const downImg = require('../../img/downImg.png');
const time = require('../../../../common/img/date.png')

export default class DownLoad extends React.Component{
  constructor(props) {
    super(props),
    this.state = {
      list :[
        {id:'1',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        },
        {id:'2',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        },
        {id:'3',
          img:downImg,
          name: '昏黄的阳光',
          time:'2021-01-21'
        }
      ],
      date: new Date(),
      timeShow: false
    }
  }
  render() {
    let {navigation,route} = this.props
    let {list} = this.state
    const rederItem = ({item,index}) => {
      return (
        <TouchableOpacity onPress={() => this.props.navigation.navigate('FindDetail', { img: item.img,status:true })}>
               <View style={styles.fansStyle} key={item.id} >
          <Animatable.View animation='slideInUp' style={[{ flexDirection:'row',}]}>
          <Image source={item.img} style={styles.fansImg}></Image>
           <View style={styles.nameStyle}>
            <Text style={styles.topText}>{item.name}</Text>
            <Text style={styles.bottomText}>下载时间{item.time}</Text>
           </View>
          </Animatable.View>
        </View>  
        </TouchableOpacity>
   
      )
    }
   
    return (
      <SafeAreaView style={styles.fans}>
        <Back navigation={navigation}></Back>
        <View style={[{flexDirection:'row'}]}>
          <Text style={styles.fansText}>历史下载</Text>
          <View style={[{marginLeft:'auto',marginRight:20,
        marginTop:22}]}>
          <TouchableOpacity onPress={()=>{ }}>
            <Image source={time}  style={{width: 24,height: 24 }}></Image>
          </TouchableOpacity>
          </View>
        
        </View>
        <FlatList data={list} renderItem={rederItem}></FlatList>
      </SafeAreaView>
    )
  }
}
